<!DOCTYPE html>
<html>

<head>
    <title>去广告</title>
    <link rel="stylesheet" href="./hyaStyless.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<style>
    ul {
        padding: 1rem;
    }

    li {
        font-size: 1rem;
    }
    .set{
        display: flex;
        justify-content:center;
    }
</style>

<body>
    <div id="text">
        <header class="bar bar-nav" v-show="showPN">
            <div class="bar-nav-left hya-float-left" @click="content(pre)">上</div>
            <div class="bar-nav-right hya-float-right" @click="content(next)">下</div>
        </header>
        <section style="text-align:center;margin-top:2.2rem;">
            <input type="search" v-model="name">
            <button class="button" @click="sousou">搜索</button>
        </section>
        <ul>
            <div v-show="showPN" class="set">
                    <button @click="fontSize(0)" style="width:2rem;height:2rem;">小</button>
                    <button @click="fontSize(1)" style="width:2rem;height:2rem;">中</button>
                    <button @click="fontSize(2)" style="width:2rem;height:2rem;">大</button>
                    <button @click="backgroundC(0)" style="width:4rem;height:2rem;">护眼</button>
                    <button @click="backgroundC(1)" style="width:4rem;height:2rem;">白天</button>
                    <button @click="backgroundC(2)" style="width:4rem;height:2rem;">黑夜</button>
            </div>
            <li v-for="item in data" :key="item.id" @click="content(item.url)" v-show="!showPN">
                {{item.title||item.name}}
            </li>
        </ul>
        <div class="bookcontent" style="padding:0 0.5rem;">
        </div>
        <button class="button hya-float-left" @click="content(pre)" v-show="showPN">上一章</button>
        <button class="button hya-float-right" @click="content(next)" v-show="showPN">下一章</button>
    </div>

</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#text",
        data() {
            return {
                name: "",
                data: [],
                showPN: false,
                pre: "",
                next: ""
            }
        },
        methods: {
            sousou: function () {
                var url = "https://acfun.leanapp.cn/novels?q=" + this.name;
                var _this = this;
                $.get(url, function (data) {
                    _this.data = data.results;
                    $(".bookcontent").html("");
                    _this.showPN = false;
                })
            },
            content: function (url) {
                var _this = this;
                console.log(url)
                $.get(url, function (data) {
                    _this.data = data.chapters;
                    if (data.content) {
                        _this.data = [];
                        $(".bookcontent").html(data.content);
                        window.scrollTo(0, 0)
                        _this.pre = data.prev;
                        _this.next = data.next;
                        _this.showPN = true;
                    }
                })
            },
            fontSize: function (index) {
                switch (index) {
                    case 0:
                        $('.bookcontent').css({
                            fontSize: "0.8rem"
                        });
                        return;
                    case 1:
                        $('.bookcontent').css({
                            fontSize: "1rem"
                        });
                        return;
                    case 2:
                        $('.bookcontent').css({
                            fontSize: "1.2rem"
                        });
                        return;
                }
            },
            backgroundC: function (index) {
                switch (index) {
                    case 0:
                        $('body').css({
                            backgroundColor: "rgb(204,232,207)",
                            color:"rgb(0,0,0)"
                        });
                        return;
                    case 1:
                    $('body').css({
                        backgroundColor: "rgb(255,255,255)",
                        color:"rgb(0,0,0)"
                    });
                        return;
                    case 2:
                    $('body').css({
                        backgroundColor: "rgb(0,0,0)",
                        color:"rgb(255,255,255)"
                    });
                        return;
                }
            }
        }
    })
</script>

</html>